<template>
    <div class="user_analysis" v-loading="loading">
        <header>用户分析</header>
        <div class="key_targets">
            <div class="key_targets_title">昨日关键指标</div>
            <div class="targets">
                <div class="target1 target">
                    <p>用户总数</p>
                    <p>新增用户数</p>
                    <p>活跃用户数</p>
                </div>
                <div class="target2 target" v-if="userData">
                    <p>{{userData.userTotal}}</p>
                    <p>{{userData.userNewNum}}</p>
                    <p>{{userData.userActiveNum}}</p>
                </div>
            </div>
            <div class="blank"></div>
            <div class="user_datas">
                <div class="user_datas_top">
                    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="用户总数"></el-tab-pane>
                        <el-tab-pane label="新增用户数"></el-tab-pane>
                        <el-tab-pane label="活跃用户数"></el-tab-pane>
                    </el-tabs>
                    <div style="display:flex;align-items:center;">
                        <div style="display:flex;align-items:center;margin:20px 40px 0 0;">
                            <el-tabs v-model="activeName2" @tab-click="handleClick2">
                                <el-tab-pane label="本周"></el-tab-pane>
                                <el-tab-pane label="本月"></el-tab-pane>
                                <el-tab-pane label="全年"></el-tab-pane>
                            </el-tabs>
                        </div>
                        <el-date-picker @change="selTime" v-model="value1" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                    </div>
                    <div class="user_datas_dates"></div>
                </div>
                <div class="user_datas_chars" v-if="arrs.length>0">
                    <x-chart :id="id" :option="option"></x-chart>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
    import XChart from '@/views/statistics/charts'
    import options from '@/assets/js/charts'
    export default {
        name: 'user_analysis',
        data() {
            let option = options.bar
            return {
                id: 'test',
                option: option,
                value1: '',
                flag: 3, //1-本周 2-本月 3-本年 4-其它
                pickerOptions1: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                activeName: '0', //标签选中的名字 0-用户总数 1-新增用户数 2-活跃用户数
                loading: true,
                userData: '', //用户数据
                statisticsData: [], //报表数据
                arrs: [],
                arrd: [],
                activeName2: '2', //标签选中的名字 0-本周 1-本月 2-全年
            }
        },
        computed: {
            //请求参数
            objs() {
                let obj = {};
                if(this.flag === 3) {
                    obj.TYPE = 1;
                } else {
                    obj.TYPE = 0;
                }
                if(this.value1 === null) {
                    this.value1 = '';
                }
                if(this.value1.length > 0) {
                    obj.STARTTIME = this.value1[0].getTime();
                    obj.ENDTIME = this.value1[1].getTime();
                }
                return obj;
            },
        },
        created() {
            let d = new Date();
            let dd = new Date();
            dd.setDate(dd.getDate() - 365);
            this.value1 = [dd, d]; //默认为最近一年 
            this.getData();
            //console.log(options);
        },
        methods: {
            //用户分析
            getData() {
                let self = this;
                let str = '';
                if(this.activeName === '0') {
                    str = 'userTotal'; //用户总数
                } else if(this.activeName === '1') {
                    str = 'userNewNum'; //新增用户
                } else if(this.activeName === '2') {
                    str = 'userActiveNum'; //活跃用户
                }
                this.$axiosPost('/4SCAFE/back/statistics/userStatistics.action', this.objs).then(res => {
                    //console.log(res);
                    this.loading = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.userData = res.USERSTATISTICS;
                        this.statisticsData = res.LISTUSERSTATISTICS;
                        this.arrd = res.LISTUSERSTATISTICS;
                        this.statisticsData.forEach(function(v) {
                            self.arrs.push(v[str]);
                            options.bar.xAxis.categories.push(v.recordTime);
                        })
                        //console.log(this.arrs); 
                        if(this.arrs.length > 0) {
                            options.bar.series[0].data = this.arrs;
                        }
                    }
                })
            },
            handleClick(tab) {
                let self = this;
                this.arrs = [];
                if(tab.index == 0) {
                    this.activeName = '0';
                } else if(tab.index == 1) {
                    this.activeName = '1';
                } else if(tab.index == 2) {
                    this.activeName = '2';
                }
                this.getData();
            },
            handleClick2(tab, event) {
                this.arrs = [];
                let d = new Date();
                let dd = new Date();
                if(tab.index === '0') {
                    dd.setDate(dd.getDate() - 7);
                    this.flag = 1;
                } else if(tab.index === '1') {
                    dd.setDate(dd.getDate() - 30);
                    this.flag = 2;
                } else if(tab.index === '2') {
                    dd.setDate(dd.getDate() - 365);
                    this.flag = 3;
                }
                this.value1 = [dd, d];
                this.getData();
            },
            selTime() {
                if(this.value1.length === 0 || this.value1 === null) {
                    this.$alert('请选择日期', '提示', {
                        confirmButtonText: '确定'
                    })
                    this.activeName2 = '4';
                    return
                }
                this.arrs = [];
                let aa = this.value1[0].getTime();
                let bb = this.value1[1].getTime();
                let d = new Date();
                let dd = new Date();
                if(bb - aa > 2592000000 && bb - aa !== 31536000000) {
                    this.$alert('选择日期不可超过30天,请重新选择', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.value1 = [];
                            this.activeName2 = '4';
                        }
                    });
                } else if(bb - aa === 31536000000) {
                    this.activeName2 = '2';
                    this.flag = 3;
                    this.getData();
                } else if(bb - aa === 2592000000) {
                    this.activeName2 = '1';
                    this.flag = 2;
                    this.getData();
                } else if(bb - aa === 604800000) {
                    this.activeName2 = '0';
                    this.flag = 1;
                    this.getData();
                } else {
                    this.activeName2 = '3';
                    this.flag = 4;
                    this.getData();
                }
            },
        },
        components: {
            XChart
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    #test {
        width: 400px;
        height: 400px;
        margin: 40px auto;
    }
    .user_analysis {
        min-height: 100%;
        background: #f0f2f5;
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .key_targets {
            width: 97%;
            background: #fff;
            margin: 0 auto;
            .key_targets_title {
                height: 55px;
                margin-top: 30px;
                font-size: 20px;
                line-height: 55px;
                padding-left: 30px;
                border-bottom: 1px solid #DCDCDC;
                font-weight: 700;
            }
            .targets {
                display: flex;
                flex-flow: column;
                padding: 20px 0;
                .target {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    p {
                        color: #606266;
                    }
                }
                .target2 {
                    p {
                        font-size: 24px;
                        color: #000;
                        font-weight: 700;
                    }
                    p:nth-of-type(1) {
                        margin-left: -28px;
                    }
                    p:nth-of-type(2) {
                        margin-left: -20px;
                    }
                    p:nth-of-type(3) {
                        margin-left: 10px;
                    }
                }
            }
            .blank {
                height: 30px;
                background: #f0f2f5;
            }
            .user_datas {
                height: 500px;
                background: #fff;
                .user_datas_top {
                    height: 55px;
                    border-bottom: 1px solid #DCDCDC;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
                .user_datas_chars {
                    margin-top: 20px;
                }
            }
        }
    }
</style>